import { useState } from "react";

// useState的使用
// 1.导入useState
// 2.执行函数并传入初始值 必须在函数组件中
// 3.[数据， 修改数据的方法]
// 4.使用数据 修改数据


// useState的读取和修改
// const [ count, setCount ] = useState(0)
// 1.useState传过来的参数，作为count的初始值
// 2.[ count, setCount ] 是一个解构赋值。useState的返回值是一个数组
// count, setCount的名字可以自定义
// 顺序不能交换
// 3.setCount函数 作用用来修改count 依旧不能直接修改原值，得用新值替换旧值
// 4.count 和 setCount 是一对的、绑定的


// useState 组件的更新
// 当调用setCount的时候，更新过程

// 首次渲染
// 首次被渲染的时候 组件内部的代码会被执行一次
// 其中useState也会跟着执行  但是 初始值只在首次渲染时生效

// 更新渲染 setCount都会更新
// 1.app组件会再次渲染，这个函数会再次执行
// 2.useState再次执行，得到的新值不再是初始值，会是新值，模板会用新值渲染
// 后续只要调用setCount整个app中代码都会执行。count值都会是最新值

function App () {
  const [count, setCount] = useState(0)
  console.log(count);
  // console.log(useState);
  return (
    <div>
      <button onClick={ () => { setCount(count + 1) } }>{ count }</button>
    </div>
  )
}


export default App;